<%@ page language="java" contentType="text/html; charset=utf-8 " import="domain.Article,java.util.*,service.article.*"
pageEncoding="utf-8"%>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta charset="utf-8" />
		<meta charset="utf-8">
	<title>旅游规划</title>
			<!--网页标题左侧显示-->
					<link rel="icon" href="img/logo.ico" type="image/x-icon">
					<!--收藏夹显示图标-->
					<link rel="shortcut icon" href="img/logo.ico" type="image/x-icon">
			<link rel="stylesheet" href="css/bootstrap.min.css">
			<link rel="stylesheet" href="css/animate.min.css">
			<link rel="stylesheet" href="css/magnific-popup.css">
			<link rel="stylesheet" href="fontawesome/css/all.min.css">
			<link rel="stylesheet" href="css/dripicons.css">
			<link rel="stylesheet" href="css/slick.css">
			<link rel="stylesheet" href="css/default.css">
			<link rel="stylesheet" href="css/style1.css">
			<link rel="stylesheet" href="css/responsive.css">
			<style type="text/css">
				*, *:before, *:after {
				  box-sizing: border-box;
				}
				
				.content {
				  display: flex;
				  margin: 0 auto;
				  justify-content: center;
				  align-items: center;
				  flex-wrap: wrap;
				  max-width: 1000px;
				}
				
				.heading {
				  width: 100%;
				  margin-left: 1rem;
				  font-weight: 900;
				  font-size: 1.618rem;
				  text-transform: uppercase;
				  letter-spacing: .1ch;
				  line-height: 1;
				  padding-bottom: .5em;
				  margin-bottom: 1rem;
				  position: relative;
				}
				.heading:after {
				  display: block;
				  content: '';
				  position: absolute;
				  width: 60px;
				  height: 4px;
				  background: linear-gradient(135deg, #1a9be6, #1a57e6);
				  bottom: 0;
				}
				
				.description {
				  width: 100%;
				  margin-top: 0;
				  margin-left: 1rem;
				  margin-bottom: 3rem;
				}
				
				.card {
				  color: inherit;
				  cursor: pointer;
				  width: calc(33% - 2rem);
				  min-width: calc(33% - 2rem);
				  height: 400px;
				  min-height: 400px;
				  perspective: 1000px;
				  margin: 1rem;
				  position: relative;
				}
				@media screen and (max-width: 800px) {
				  .card {
				    width: calc(50% - 2rem);
				  }
				}
				@media screen and (max-width: 500px) {
				  .card {
				    width: 100%;
				  }
				}
				
				.front,
				.back {
				  display: flex;
				  border-radius: 6px;
				  background-position: center;
				  background-size: cover;
				  text-align: center;
				  justify-content: center;
				  align-items: center;
				  position: absolute;
				  height: 100%;
				  width: 100%;
				  -webkit-backface-visibility: hidden;
				  backface-visibility: hidden;
				  transform-style: preserve-3d;
				  transition: ease-in-out 600ms;
				}
				
				.front {
				  background-size: cover;
				  padding: 2rem;
				  font-size: 1.618rem;
				  font-weight: 600;
				  color: #fff;
				  overflow: hidden;
				  font-family: Poppins, sans-serif;
				}
				.front:before {
				  position: absolute;
				  display: block;
				  content: '';
				  top: 0;
				  left: 0;
				  right: 0;
				  bottom: 0;
				  background: linear-gradient(135deg, #1a9be6, #1a57e6);
				  opacity: .25;
				  z-index: -1;
				}
				.card:hover .front {
				  transform: rotateY(180deg);
				}
				.card:nth-child(even):hover .front {
				  transform: rotateY(-180deg);
				}
				
				.back {
				  background: #fff;
				  transform: rotateY(-180deg);
				  padding: 0 2em;
				}
				.card:hover .back {
				  transform: rotateY(0deg);
				}
				.card:nth-child(even) .back {
				  transform: rotateY(180deg);
				}
				.card:nth-child(even):hover .back {
				  transform: rotateY(0deg);
				}
				
				.button {
				  transform: translateZ(40px);
				  cursor: pointer;
				  -webkit-backface-visibility: hidden;
				  backface-visibility: hidden;
				  font-weight: bold;
				  color: #fff;
				  padding: .5em 1em;
				  border-radius: 100px;
				  font: inherit;
				  background: linear-gradient(135deg, #1a9be6, #1a57e6);
				  border: none;
				  position: relative;
				  transform-style: preserve-3d;
				  transition: 300ms ease;
				}
				.button:before {
				  transition: 300ms ease;
				  position: absolute;
				  display: block;
				  content: '';
				  transform: translateZ(-40px);
				  -webkit-backface-visibility: hidden;
				  backface-visibility: hidden;
				  height: calc(100% - 20px);
				  width: calc(100% - 20px);
				  border-radius: 100px;
				  left: 10px;
				  top: 16px;
				  box-shadow: 0 0 10px 10px rgba(26, 87, 230, 0.25);
				  background-color: rgba(26, 87, 230, 0.25);
				}
				.button:hover {
				  transform: translateZ(55px);
				}
				.button:hover:before {
				  transform: translateZ(-55px);
				}
				.button:active {
				  transform: translateZ(20px);
				}
				.button:active:before {
				  transform: translateZ(-20px);
				  top: 12px;
				}
				.opa {
					opacity: 0;
					opacity: 1\9\0;
				}
				.text1case {
					animation: pro_1_n1 0.5s 0.2s forwards ease;
					-webkit-animation: pro_1_n1 0.5s 0.2s forwards ease;
					-moz-animation: pro_1_n1 0.5s 0.2s forwards ease;
					height: 200px;
					position: absolute;
					top: 50%;
					left: 50%;
					margin-top: -40px;
					margin-left: -452px;
					width:900px;
					font-size: 50px;
					font-weight: normal;
					line-height: 200px;
					line-height: 105px\9;
					*line-height: 105px;
					color: #fff;
					vertical-align: middle;
				}
				.text2case {
					width: 40%;
					overflow: hidden;
					font-size: 30px;
					line-height: 65px;
					color: #FFFFFF;
					height: 65px;
					position: absolute;
					top: 90%;
					left: 30%;
					margin-top: 50px;
					border-bottom: 3px solid #312F2F;
					animation: pro_1_n1 0.5s 0.3s forwards ease;
					-webkit-animation: pro_1_n1 0.5s 0.3s forwards ease;
					-moz-animation: pro_1_n1 0.5s 0.3s forwards ease;
				}
				
				@keyframes pro_1_n1 {
					0% {
						transform: translate(0px, 130px);
						opacity: 0
					}
					30% {
						opacity: 1
					}
					100% {
						transform: translate(0px, 0px);
						opacity: 1
					}
				}
				@-webkit-keyframes pro_1_n1 {
					0% {
						-webkit-transform: translate(0px, 130px);
						opacity: 0
					}
					30% {
						opacity: 1
					}
					100% {
						-webkit-transform: translate(0px, 0px);
						opacity: 1
					}
				}
				@-moz-keyframes pro_1_n1 {
					0% {
						-moz-transform: translate(0px, 130px);
						opacity: 0
					}
					30% {
						opacity: 1
					}
					100% {
						-moz-transform: translate(0px, 0px);
						opacity: 1
					}
				}
				.heading1 {
					width: 100%;
					height: 320px;
					position: absolute;
					bottom: 60%;
					z-index: 100;
					left: 0px;
					margin-bottom: -147px;
					text-align: center;
				}
				body{
					margin: 0;
					padding: 0;
					background-color: rgba(0,0,0,0.08);
				}
				.head{
					position: fixed;
					top: 0;
					height: 80px;
					width: 100%;
					z-index: 999;
					-webkit-box-shadow:0 10px 15px rgba(25, 25, 25, 0.1);
					background-color: white;
				}
				.header {
					position: relative;
				  display: flex;
				  justify-content: space-between;
				  align-items: center;
				  padding: 1rem 2.5rem;
				}
				
				.logo {
					position: relative;
				  font-size: 34px;
				  line-height: 50px;
				  text-align: center;
				  text-decoration: none;
				  color: white;
				}
				
				.site-nav {
					position: relative;
				  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
				}
				
				ul {
					position: relative;
				  display: flex;
				  padding: 0;
				  margin: 0;
				  list-style-type: none;
				}
				ul:hover li:not(:hover) a {
				  opacity: 0.2;
				}
				ul li {
					position: relative;
				  position: relative;
				  padding: 10px 25px 10px 25px;
				  cursor: pointer;
				}
				ul li::after {
				  position: absolute;
				  content: "";
				  top: 100%;
				  left: 0;
				  width: 100%;
				  height: 2px;
				  background: #3498db;
				  transform: scaleX(0);
				  transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
				}
				ul li:hover::after, ul li.active::after {
				  transform: scaleX(1);
				}
				ul li a {
				  position: relative;
				  display: flex;
				  color: black;
				  font-family: Lato, sans-serif;
				  text-decoration: none;
				  transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
				}
				.footer{
					
					text-align: center;
					background-color: #312F2F;
					width: 100%;
					color: white;
					font-size: 20px;
					padding-top: 18px;
					padding-bottom: 1%;
				}
				.banner{
					height: 960px;
					width: 100%;
					background: url(img/banner2.jpg) no-repeat;
					background-size: 100% 100%;
				}
				.info{
					height: 480px;
					width: 100%;
					z-index: 999;
					box-shadow: rgba(0,0,0,0.08) 0px 1px 4px 0px;
					background-color: white;
				}
			</style>
				<%
                    ArticleService articleService = new ArticleServiceImpl();
                        List<Article> list = articleService.getNewsList(3);
                %>
			<body>
			<div class="head" style="overflow: hidden;">
						<div class="header">
						  <a href="index.html" class="logo"><img src="img/logo2.png" height="40px" /></a>
						  <nav class="site-nav">
						    <ul>
								<li><a href="JapanStudy.html">日本留学</a></li>
								<li><a href="kjds.html">跨境电商</a></li>
								<li><a href="lygh.jsp">旅程规划</a></li>
								
								<li><a href="CompanyInfo.jsp">关于我们</a></li>
						    </ul>
						  </nav>
						</div>
					</div>
			<div class="banner">
				<div class="heading1" style="-webkit-transform: translateY(0px);">
				        <div class="text1case opa web-font" >世界那么大</div>
				        <div class="text2case opa web-font" style="border: 0px;">⬇⬇⬇规划规划,轻松周游世界⬇⬇⬇</div>
				</div>
				
			</div>
			<br />
			<div class="content">
			  <h1 class="heading">旅程信息</h1>
			  <p class="description">为你定制专属的旅程安排</p>
			  <%
                    for(int i =0; i<list.size();i++){
              %>
			  <a class="card" href="newsinfo.jsp?id=<%=list.get(i).getId() %>">
			    <div class="front" style="background-image: url(img/<%=(i+1)%6 %>.jpg);">
			      <p style="color: white;font-size: 18px;"><%=list.get(i).getTitle() %></p>
			    </div>
			    <div class="back">
			      <div>
			        <%=list.get(i).getAbs() %>
			        <button class="button">详情</button>
			      </div>
			    </div></a>
			    <% } %>

			</div>
			<div class="footer">
				<p>0791-86122800&nbsp;&nbsp;&nbsp;+86-13037283201</p>
				<p>南昌市站前西路江西商务大厦6楼</p>
				<p>江西信桥信息咨询有限公司</p>
				<br />
				<p>备案号：xxxxxxxxxx</p>
			</div></body>
			<!-- JS here -->
			<script src="js/vendor/jquery-1.12.4.min.js"></script>
			<script src="js/one-page-nav-min.js"></script>
			<script src="js/slick.min.js"></script>
			<script src="js/jquery.counterup.min.js"></script>
			<script src="js/jquery.scrollUp.min.js"></script>
			<script src="js/jquery.magnific-popup.min.js"></script>
			<script src="js/main.js"></script>
			<script type="text/javascript">
					function getUrl(e){
						window.location.href=e+'.html'
					}
				</script>
	</html>
	